<template>
  <view class="result">
    <view class="result-top">
      <text class="txt block">姓名：{{info.name}}</text>
      <text class="txt block">性别：{{info.xb}}</text>
      <text class="txt block">年龄：{{info.nl}}</text>
      <text class="txt block">评估日期：{{info.date}}</text>
    </view>
    <view class="result-content">
      <view class="container">
        <view class="section">
          <view class="header flex-align l-100">
            <text class="title">评分标准</text>
          </view>
          <text class="content">{{info.standard}}</text>
        </view>
        <view class="section">
          <view class="header flex-align l-100">
            <text class="title">评估结果</text>
          </view>
          <text class="content">{{info.content}}</text>
        </view>
      </view>

    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        info: {
          // name: '小红',
          // nl: 22,
          // xb: '女',
          // date: '2021-12-03',
          // standard: '此评估分为预评估题目和正式评估题目，根据患者不同年龄推送不同的评估内容。在评估题目中...',
          // content: '患者整体评估健康'
        }
      }
    },
    onLoad({ result: res }) {
      try {
        const result =  JSON.parse(decodeURIComponent(res));
        console.log('result', result);
        this.info = result
      } catch (error) {
        console.log(error);
      }

    }
  }
</script>
<style lang="scss">
  .result {
    width: 100%;
    // padding: 30rpx 40rpx;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.02);

    &-top {
      padding: 40rpx 60rpx;
      height: 280rpx;
      background-color: rgba($color: $uni-color-primary, $alpha: 0.08);
      // background: linear-gradient(181deg, #fa6bac 0%, #f78acb 15%, #faaae9 43%, #f7d0ef 90%);
      color: $uni-color-primary;
      font-size: 32rpx;
      line-height: 2;
      // border-radius: 24rpx;
    }

    &-content {
      margin-top: 40rpx;
      padding: 0rpx 40rpx;
      flex: 1;
      // display: flex;
      .container {
        padding: 40rpx 0 0 30rpx;
        border-radius: 24rpx;
        box-shadow: 0px 0px 15px rgb(41 132 248 / 10%);
        height: calc(100% - 40rpx);
        background-color: #ffffff;
      }

      .title {
        display: inline-block;
        margin-bottom: 20rpx;
        padding-left: 12rpx;
        font-size: 32rpx;
        font-weight: 500;
        position: relative;

        &::before {
          content: '';
          display: inline-block;
          height: 80%;
          width: 2px;
          background-color: $uni-color-primary;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
      }

      .section {
        margin-bottom: 40rpx;
        line-height: 1.5;
      }
    }
  }
</style>